<template>
  <div id="search">
      <div class="inputcover">
        <i class="iconfont icon-sousuo"></i>
        <input placeholder="搜索歌曲、歌手、专辑" v-model="message"  @input="conceal" @keyup.enter="hcsj">
        <!-- @input="conceal" -->
        <i class="iconfont icon-delete" @click="tabct" v-show="!isrun"></i>
      </div>
      
      <!--热门搜索  -->
      <section v-show="isrun">
        <p>热门搜索</p>
       <template v-for="item in karArr">
        <div :key="item.id" class="rmgq">
        <a href=""><span>{{item.searchWord}}</span></a>
        </div>
       </template>
      </section>

      <!-- 搜索输出 -->
      <div class="m-recom" v-show="!isrun">
        <h3>搜索"{{message }}"</h3>
        <template v-for="item in skrArr">
          <div class="didle" :key="item.id">
          <i></i>
          <span>{{item.name}}</span>
        </div>
        </template>
      </div>

      <!-- 历史纪录 -->
      <template v-for="item in hisTory">
        <div class="histir" :key="item.id">
       <div>
          <i class="iconfont icon-headset"></i>
        <span>{{this.message}}</span>
        <i class="iconfont icon-shanchu"></i>
       </div>
      </div>
      </template> 

      <!-- 搜索结果 -->
      <!-- <div class="matchlist">
        <p>最佳匹配</p>
        <div class="m-srnat">
          <img src="../../assets/img/1.jpg" alt="">
        <div>
          <span>歌手:</span>
          <a href="">周杰伦</a>
          <span>(Jason Zhang)</span>
          <i class="iconfont icon-sousuo"></i>
        </div>
        </div>
      </div>

<div class="matchlist">
        <div class="m-srnat">
          <img src="../../assets/img/1.jpg" alt="">
        <div>
          <span>专辑:</span>
          <a href="">裹着心的光</a>
          <span>(Jason Zhang)</span>
          <i class="iconfont icon-sousuo"></i>
        </div>
        </div>

      </div> -->


  </div>
</template>

<script>
export default {
data :()=> {
  return{
    karArr:[], // 热门搜索
    message: "", // 绑定
    isrun:true,
    skrArr:[], // 
    hisTory:[]   //历史纪录
  }
},
 async mounted(){
   let ers = await this._axios.get("/search/hot/detail")
   this.karArr = ers.data.data.slice(0,10);
  //  搜索 
 },
 methods:{
 async conceal(){
   if(this.message){
  let rfs = await this._axios.get(`/cloudsearch?keywords=${this.message} `)
  this.skrArr = rfs.data.result.songs
  this.isrun=""
    //  console.log(this.hisTory);
    // console.log("来了");
   }else if(!this.message){
     this.skrArr = ""
    //  console.log("没了");
     this.isrun= !this.isrun
   }
 },
 tabct(){
    this.message="",
    this.isrun=!this.isrun
 },
 async hcsj(){
   let rfs = await this._axios.get(`/cloudsearch?keywords=${this.message} `)
   console.log(rfs);
  // this.skrArr = rfs.data.result.songs
  // console.log(this.skrArr);
  //  if(this.message){
  // this.hisTory=this.hisTory.push(
  //      this.message,
  //      console.log("来了")
  //    )
  //  }
 }
//  babrt(id){
//      this.hisTory=this.hisTory.forEach(item => {
//        return item.splice(id,1)
//      })
// }
}
}
</script>

<style lang="scss" scoped>
#search{
  font-size: _vw(35);
  .inputcover{
    height: _vw(100);
    border-bottom: 1px solid gainsboro;
    display: flex;
    justify-content: center;
    margin-top: _vw(30);
    i:first-child{
      position: absolute;
      width: _vw(40);
      left: _vw(40);
      top: _vw(274);
    }
     i:last-child{
      position: absolute;
      right: _vw(50);
      top: _vw(274);
    }
    input{
      position: relative;
      text-indent: _vw(70);
      outline: none;
      border: none;
      display: inline-block;
      height: _vw(70);
      font-size: _vw(35);
      width: 93%;
      border-radius: _vw(30);
      background-color: rgba(0,0,0,.2);
    }
  }
  section{
    margin: _vw(20) _vw(0) _vw(0) _vw(20);
    .rmgq{
      float: left;
      margin-top: _vw(20);
      margin-left: _vw(20);
        a{
      display: inline-block;
      color: rgba(17, 8, 8, 0.9);
      span{
        height: _vw(70);
        line-height: _vw(70);
        border-radius: _vw(30);
        text-align: center;
        border: _vw(2) solid gainsboro;
      }
    }
  }
}
.m-recom{
  font-size: _vw(30);
  margin-left: _vw(20);
  h3{
    height: _vw(80);
    line-height: _vw(80);
    color: rgba(0, 0, 255, 0.521);
  }
}
// .histir{
//   display: flex;
//   justify-content: space-betwee
//   margin: _vw(20);
//   height: _vw(60);
//   background-color: blue;
//   div{
//   margin-top: _vw(300);
//   background-color: blue;
//   }
// }
.didle{
 span{
  display: inline-block;
  font-size: _vw(40);
  width: 93%;
  height: _vw(80);
  line-height: _vw(80);
  margin-left: _vw(40);
  border-bottom: 1px solid gainsboro;
  // background-color: gold;
 }
}
.matchlist{
  margin: _vw(20) _vw(0) _vw(0) _vw(20);
  .m-srnat{
    margin-top: _vw(30);
    display: flex;
    line-height: _vw(100);
    
    div{
      margin-left: _vw(30);
      width: 100%;
      background-color: gold;
      i{
        float: right;
        padding-right: _vw(50);
      }
    }
     img{
     width: _vw(100);
  }
  }
 
}
}
</style>